<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中使用AJAX</title>
    <style type="text/css">
        .initDiv{
            width: 500px;
            height: auto;
            margin: 0 auto;
            background-color: green;
            border: 1px solid red;
            display: block;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery中使用AJAX加载本地txt文本</legend>
        <div id="div1">
            <h2>jQuery中使用AJAX示例一</h2>
        </div>
        <button id="btnAjaxLoadData1">jQuery中使用AJAX加载本地txt文本</button>
    </fieldset>
    <fieldset>
        <legend>jQuery中使用AJAX加载本地json格式数据</legend>
        <div id="div2">
            <h2>jQuery中使用AJAX示例二</h2>
        </div>
        <button id="btnAjaxLoadData2">jQuery中使用AJAX加载本地json格式数据</button>
    </fieldset>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnAjaxLoadData1").click(function () {
            //使用AJAX加载data目录下的ajax_test_data.txt文件中的文本内容，加载成功后，将文本内容存放到result参数中返回
            $.ajax({url:"data/ajax_test_data.txt",success:function(result){
                $("#div1").html(result);
            }});
        });

        $("#btnAjaxLoadData2").click(function () {
            //使用AJAX加载data目录下的data.json文件中的文本内容，加载成功后，将文本内容存放到result参数中返回
            $.ajax({
                    url:"data/data.json",//使用本地文件模拟要加载的数据所在的服务器地址
                    data:{},//需要向服务端传递的参数
                    dataType: "json",//设置服务端的数据以json的格式返回
                    success:function(result){//数据加载成功后要执行的回调函数
                        console.log(result);
                        $("#div2").text(JSON.stringify(result));//JSON.stringify()方法是将一个对象转换成JSON字符串
                    }
                });
        });
    });

</script>
</html>